<template>
  <div class="mobile-menu-container" v-show="visible">
    <div class="mobile-menu">
      <div class="mobile-menu-header">
        <div class="mobile-menu-title">{{ currentSubmenu ? currentSubmenu.meta.title : '菜单' }}</div>
        <div class="mobile-menu-close" @click="close">
          <i class="el-icon-close"></i>
        </div>
      </div>

      <!-- 主菜单 -->
      <div class="mobile-menu-content" v-if="!currentSubmenu">
        <div
          v-for="(item, index) in menuItems"
          :key="index"
          class="mobile-menu-item"
          @click="handleMainMenuClick(item)"
        >
          <i :class="item.meta && item.meta.icon"></i>
          <span>{{ item.meta && item.meta.title }}</span>
          <i class="el-icon-arrow-right" v-if="item.children && item.children.length"></i>
        </div>
      </div>

      <!-- 子菜单 -->
      <div class="mobile-menu-content" v-else>
        <div class="mobile-menu-back" @click="backToMainMenu">
          <i class="el-icon-arrow-left"></i>
          <span>返回</span>
        </div>
        <div
          v-for="(subItem, subIndex) in currentSubmenu.children"
          :key="subIndex"
          class="mobile-menu-item"
          @click="handleMenuClick(subItem)"
        >
          <i :class="subItem.meta && subItem.meta.icon"></i>
          <span>{{ subItem.meta && subItem.meta.title }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import Logo from '@/assets/common/logo.png';
import { mapGetters } from 'vuex';

export default {
    name: 'MobileMenu',
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        menuItems: {
            type: Array,
            default: () => []
        }
    },
    data () {
        return {
            // logo: Logo,
            currentSubmenu: null // 当前选中的子菜单
        };
    },
    computed: {
        ...mapGetters([
            'mobileMenuVisible'
        ])
    },
    watch: {
        mobileMenuVisible (val) {
            console.log('MobileMenu 组件检测到 mobileMenuVisible 变化:', val);
            // 当菜单关闭时，重置子菜单状态
            if (!val) {
                this.currentSubmenu = null;
            }
        },
        visible (val) {
            // 当菜单关闭时，重置子菜单状态
            if (!val) {
                this.currentSubmenu = null;
            }
        }
    },
    mounted () {
        console.log('MobileMenu 组件已挂载，visible:', this.visible);
        console.log('MobileMenu 组件已挂载，Vuex 状态:', this.mobileMenuVisible);
    },
    methods: {
        close () {
            console.log('MobileMenu 关闭按钮被点击');
            // 使用 Vuex action 关闭菜单，添加正确的命名空间
            this.$store.dispatch('setMobileMenu', false);
            // 同时触发事件，保持向后兼容
            this.$emit('update:visible', false);
            // 重置子菜单状态
            this.currentSubmenu = null;
        },
        handleMainMenuClick (item) {
            // 如果有子菜单，则显示子菜单
            if (item.children && item.children.length) {
                this.currentSubmenu = item;
            } else {
                // 没有子菜单，直接跳转
                this.handleMenuClick(item);
            }
        },
        handleMenuClick (item) {
            if (item.name) {
                this.$router.push({name: item.name});
                this.close();
            }
        },
        backToMainMenu () {
            // 返回主菜单
            this.currentSubmenu = null;
        }
    }
};
</script>

<style lang="scss" scoped>
.mobile-menu-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2000;
  display: flex;
  justify-content: flex-start;
  transition: all 0.3s ease;
}

.mobile-menu {
  width: 80%;
  height: 100%;
  background-color: #fff;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #eee;
}

.mobile-menu-title {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.mobile-menu-close {
  font-size: 24px;
  cursor: pointer;
  color: #909399;

  &:hover {
    color: #409EFF;
  }
}

.mobile-menu-content {
  flex: 1;
  overflow-y: auto;
  padding: 10px 0;
}

.mobile-menu-back {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  cursor: pointer;
  color: #409EFF;
  border-bottom: 1px solid #f5f7fa;
  margin-bottom: 10px;

  i {
    margin-right: 10px;
    font-size: 16px;
  }

  &:hover {
    background-color: #f5f7fa;
  }
}

.mobile-menu-item {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  cursor: pointer;
  transition: background-color 0.3s;

  i {
    margin-right: 10px;
    font-size: 18px;
    color: #606266;

    &.el-icon-arrow-right {
      margin-right: 0;
      margin-left: auto;
      color: #c0c4cc;
    }
  }

  span {
    font-size: 16px;
    color: #303133;
    flex: 1;
  }

  &:hover {
    background-color: #f5f7fa;
  }
}
</style>
